import React, { useEffect, useState } from 'react';
import { Box, Flex, Image, Text } from '@chakra-ui/react';
import goRight from '@/assets/img/go.png';
import { useRouter } from 'next/router';
import { Button, Input, message } from 'antd';

import person_ustd from '@/assets/img/person_ustd.png';
import person_BND from '@/assets/img/person_BND.png';
import exchange_1 from '@/assets/img/exchange.png';
import { queryExchange, querySwap } from '@/services/person';
import { useAccount, useSignMessage } from 'wagmi';
import { useTranslation } from 'react-i18next';
import { useDispatch } from 'react-redux';
import { toMillimeter } from '@/utils/utils';

const Exchange = () => {
    const [exchangeInfo, setExchangeInfo] = useState({} as SwagInfo);
    const [swagIpt, setSwagIpt] = useState('') // 兑出金额输入框
    const [outIpt, setOutIpt] = useState('') // 收入金额输入框

    const dispatch = useDispatch()
    const { address, isConnected } = useAccount();

    const { signMessageAsync } = useSignMessage({
        message: exchangeInfo.message,
    })

    const { t } = useTranslation();

    //点击MAX
    const handlMaX = () => {
        setSwagIpt(String(exchangeInfo.max))
    }

    // 确定兑换
    const confirmSwap = () => {
        signMessageAsync().then(res => {
            const signature = res as string
            querySwap({ signature, value: swagIpt, address }).then(res => {
                if (res.code === 0) {
                    message.success(res.msg)
                    getExchagneInfo()
                    setSwagIpt('')
                }
                else message.error(res.msg)
            })

        })

    }



    // 计算收入金额
    useEffect(() => {
        if (swagIpt) {
            const currentOut = (parseFloat(swagIpt) / exchangeInfo.bndPrice).toFixed(2)
            setOutIpt(String(currentOut))
        } else {
            setOutIpt('0.0')
        }
    }, [swagIpt])

    // 获取提币信息
    const getExchagneInfo = () => {
        queryExchange({ address }).then((res: ApiRes) => {
            if (res.code === 0) {
                setExchangeInfo(res.data as SwagInfo)
            } else { message.error(res.msg) }

        })
    }

    useEffect(() => {
        getExchagneInfo()
    }, [])

    //更新地址
    useEffect(() => {
        if (address) {
            dispatch({ type: 'ADDRESS', payload: address })
        }
    }, [address])

    return (
        <Box p={'40px 20px'} w={'100%'} boxSizing="border-box">
            <Box bgColor={'white'} minH={'360'} p={'18px 15px'} borderRadius={4}>
                <Box flex={1} textAlign={'center'}>
                    {t('exchange.Swap')}
                </Box>
                <Flex justify={'space-between'} mt={25}>
                    <Text m={0} fontSize={15} lineHeight={'24px'}>{t('exchange.Cash_out')}</Text>
                    <Flex>
                        <Text m={0} fontSize={15} lineHeight={'24px'}>BND/USDT </Text>
                        <Text m={0} fontSize={15} lineHeight={'24px'} color={'#375BE2'} fontWeight={700} ml={3}>$ {exchangeInfo.bndPrice} </Text>
                    </Flex>
                </Flex>
                <Box className="exchangeIpt">
                    <Input
                        style={{ height: '50px', paddingLeft: '17px', backgroundColor: '#F8F2F7', fontSize: '24px', color: '#6C6B77', border: '0px', borderRadius: '4px', margin: '10px 0', }}
                        placeholder={'0.0'}
                        type={'number'}
                        value={swagIpt}
                        onChange={(val) => {
                            setSwagIpt(val.target.value)
                        }}
                        className={'exchangeInput'}
                        prefix={< Image src={person_ustd.src} w={30} h={30} mr={15} ></Image>}
                        suffix={<Box onClick={handlMaX} borderRadius={20} border={'1px solid #8C8C8C'} color="#8C8C8C" fontSize={12} p={'2px 8px'} ml={15}>MAX</Box>}
                    />
                    <Flex>
                        <Text m={0} fontSize={12} lineHeight={'18px'} color={'#375BE2'}>{t('exchange.Amount')}</Text>
                        <Text m={0} fontSize={12} lineHeight={'18px'} color={'#375BE2'}>{toMillimeter(exchangeInfo.usdtBalance)}</Text>
                    </Flex>
                </Box>
                <Flex justify={'center'}><Image src={exchange_1.src} w={22} h={22}></Image></Flex>
                <Flex>
                    <Text m={0} fontSize={15} lineHeight={'24px'}>{t('exchange.Cash_in')}</Text>
                </Flex>
                <Box className="exchangeIpt">
                    <Input
                        style={{ height: '50px', paddingLeft: '17px', backgroundColor: '#F8F2F7', fontSize: '24px', border: '0px', borderRadius: '4px', margin: '10px 0' }}
                        placeholder={'0.0'}
                        value={outIpt}
                        onChange={(val) => {
                            setOutIpt(val.target.value)
                        }}
                        disabled
                        className={'exchangeInput'}
                        prefix={<Image src={person_BND.src} w={30} h={30} mr={15}></Image>}
                        suffix={<Box ml={15} w={60}></Box>}
                    />
                </Box>

                <Flex justify={'center'}>
                    <Button
                        onClick={confirmSwap}
                        style={{
                            width: '220px',
                            margin: '25px auto 0px',
                            height: '40px',
                            backgroundColor: '#375BE2'
                        }}
                        type="primary"
                    >
                        {t('button.Confirmed_5')}
                    </Button>
                </Flex>

            </Box>
        </Box >
    );
};

export default Exchange;
